<div class="flex-1 flex flex-col items-start overflow-auto lg:flex-row">
  <form class="flex flex-col gap-2 p-4 w-full lg:w-[400px] lg:max-w-[400px]" [formGroup]="formGroup">
    <pac-avatar-editor formControlName="avatar" class="w-24 h-24 self-center m-8" />

    <ngm-input class="flex-1" [label]="'PAC.Copilot.Roles.Name' | translate: {Default: 'Name'}" valueKey="key"
      formControlName="name"
    />

    <ngm-input class="flex-1" [label]="'PAC.Copilot.Roles.Title' | translate: {Default: 'Title'}" valueKey="key"
      formControlName="title"
    />

    <ngm-input class="flex-1" [label]="'PAC.Copilot.Roles.TitleCN' | translate: {Default: 'Title (CN)'}" valueKey="key"
      formControlName="titleCN"
    />

    <ngm-input class="flex-1" [label]="'PAC.Copilot.Roles.Description' | translate: {Default: 'Description'}" valueKey="key"
      formControlName="description"
    />

    <div class="flex-1 min-w-full flex flex-col">
      <label class="ngm-input-label shrink-0">{{'PAC.Copilot.Roles.Prompt' | translate: {Default: 'Prompt'} }}</label>
      <textarea class="ngm-input-element" matInput formControlName="prompt"
          cdkTextareaAutosize
          cdkAutosizeMinRows="2"
          cdkAutosizeMaxRows="8"
      ></textarea>
    </div>

    <div class="flex flex-col" formArrayName="starters">
      <label class="ngm-input-label shrink-0">{{'PAC.Copilot.Roles.Starters' | translate: {Default: 'Starters'} }}</label>
      <ngm-input class="w-full"
        formControlName="0"
        [placeholder]="'PAC.Copilot.Roles.FrequentlyQuestion' | translate: {Default: 'Frequently asked questions by users'}"
      />
      <ngm-input class="w-full"
        formControlName="1"
        [placeholder]="'PAC.Copilot.Roles.FrequentlyQuestion' | translate: {Default: 'Frequently asked questions by users'}"
      />
      <ngm-input class="w-full"
        formControlName="2"
        [placeholder]="'PAC.Copilot.Roles.FrequentlyQuestion' | translate: {Default: 'Frequently asked questions by users'}"
      />
      <ngm-input class="w-full"
        formControlName="3"
        [placeholder]="'PAC.Copilot.Roles.FrequentlyQuestion' | translate: {Default: 'Frequently asked questions by users'}"
      />
    </div>
  </form>

  <div class="w-full flex-1 flex flex-col p-4">
    <h2 class="p-2 text-lg">{{'PAC.KEY_WORDS.Knowledgebases' | translate: {Default: 'Knowledgebases'} }}</h2>
    <div class="max-h-[200px] overflow-auto">
      <pac-knowledgebase-list class="w-full"
        [knowledgebaseList]="knowledgebaseList()"
        [(knowledgebases)]="knowledgebases"
      />
    </div>

    <h2 class="my-2 p-2 text-lg">{{'PAC.KEY_WORDS.Toolset' | translate: {Default: 'Toolset'} }}</h2>
    <div class="max-h-[200px] overflow-auto">
      <pac-toolset-list class="w-full" [toolsetList]="toolsetList()" [(toolsets)]="toolsets" />
    </div>

    <div class="flex-1 min-w-full flex flex-col">
      <label class="my-2 p-2 text-lg shrink-0">{{'PAC.Copilot.Roles.ToolOptions' | translate: {Default: 'Tool Options'} }}</label>
      <textarea class="ngm-input-element" matInput [formControl]="options"
          cdkTextareaAutosize
          cdkAutosizeMinRows="2"
          cdkAutosizeMaxRows="8"
      ></textarea>
    </div>
  </div>
</div>

<div class="flex justify-between items-center p-4">
  <div></div>
  <div ngmButtonGroup>
    <button mat-button (click)="close()">{{'PAC.KEY_WORDS.Cancel' | translate: {Default: 'Cancel'} }}</button>
    <button mat-raised-button color="primary" [disabled]="loading() || (formGroup.invalid || formGroup.pristine)"
      (click)="saveAll()"
    >{{'PAC.KEY_WORDS.Save' | translate: {Default: 'Save'} }}</button>
  </div>
</div>

@if (loading()) {
  <div class="absolute w-full h-full flex justify-center items-center">
    <mat-progress-spinner mode="indeterminate" diameter="26" strokeWidth="2" />
  </div>
}